<template>
    <el-card style="width: 100%" class="addressList">
        <div slot="header">
            <el-row>
                <el-col :span="20"> 我的地址 </el-col>
                <el-col :span="4" style="text-align: right">
                    <el-button size="small" type="primary" @click="handelEdit()">新增</el-button>
                </el-col>
            </el-row>
        </div>
        <el-card v-for="(item, index) in dataList" :key="index" style="margin-bottom: 10px">
            <el-row>
                <el-col :span="20">
                    <p>
                      <span class="defaultTxt" v-if="item.defaultStatus == 1">默认地址</span>  收货人：{{ item.name }} <span style="margin-left: 20px">手机号：{{ item.phoneNumber }}</span>
                    </p>
                    <p style="margin-top: 10px">地址：{{ item.province }}{{ item.city }}{{ item.region }}{{ item.detailAddress }}</p>
                </el-col>
                <el-col :span="4" style="text-align: right">
                    <div style="padding-bottom: 15px" v-if="item.defaultStatus !== 1">
                        <el-button size="small"  type="text" @click="setDefault(item.id)"
                            >设为默认</el-button
                        >
                        
                    </div>
                    <el-button size="small" type="primary" @click="handelEdit(item.id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handelDelete(item.id)">删除</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog :close-on-click-modal="false" :visible.sync="editVisible" width="600px" title="编辑" v-if="editVisible">
            <el-form label-width="100px" size="mini">
                <el-form-item label="收货人姓名"><el-input v-model="editForm.name"></el-input></el-form-item>
                <el-form-item label="电话"><el-input v-model="editForm.phoneNumber"></el-input></el-form-item>
                <el-form-item label="省"><el-input v-model="editForm.province"></el-input></el-form-item>
                <el-form-item label="市"><el-input v-model="editForm.city"></el-input></el-form-item>
                <el-form-item label="区(县)"><el-input v-model="editForm.region"></el-input></el-form-item>
                <el-form-item label="地址"><el-input v-model="editForm.detailAddress"></el-input></el-form-item>
                <!-- <el-form-item label="默认">
                    <el-switch v-model="editForm.defaultStatus" :active-value="1" :inactive-value="0"> </el-switch>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="editVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="editFormSubmit()">确定</el-button>
            </span>
        </el-dialog>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            dataList: [],
            editForm: {},
            editVisible: false
        };
    },
    mounted() {
        this.getAddresList();
    },
    methods: {
        handelEdit(id) {
            this.editForm = {
                name: '',
                phoneNumber: '',
                province: '',
                city: '',
                region: '',
                detailAddress: '',
                defaultStatus: 0
            };
            if (id) {
                this.$http.get('/api/member/address/detail?id=' + id).then((res) => {
                    this.editForm = Object.assign({}, this.editForm, res);
                });
            }
            this.editVisible = true;
        },
        setDefault(id) {
            this.$http.get('/api/member/address/setDefault?id=' + id).then((res) => {
                this.$message.success(res);

                this.getAddresList();
            });
        },
        editFormSubmit() {
            this.$http.post('/api/member/address/save', this.editForm).then((res) => {
                this.$message.success(res);

                this.getAddresList();
                this.editVisible = false;
            });
        },
        getAddresList() {
            this.$http.get('/api/member/address/list').then((res) => {
                this.dataList = res;
            });
        },
        handelDelete(id) {
            this.$confirm('提示', {
                title: '提示',
                message: '删除？',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.get('/api/member/address/delete?id=' + id).then(() => {
                    this.getAddresList();
                });
            });
        }
    }
};
</script>

<style>
.addressList {
    font-size: 16px;
    min-height: 60vh;
}
.defaultTxt {
    padding: 5px 10px;
    line-height: 1;
    font-size: 14px;
    background-color: #ff6600;
    color: #fff;
    margin-right: 10px;
}
</style>
